<wicket:panel xmlns:wicket="http://wicket.apache.org">
    <script src="static/tablecloth/js/jquery.tablecloth.js"></script>

    <script type='text/javascript'>
        $(document).ready(function () {
            $('.tooltipLink').tooltip();
        });
    </script>

    <div class="span7" style="margin-left: 0">
        <div class="table_toolbar">
            <div class="btn-group">
                <a wicket:id="newSeason" class="btn tooltipLink" data-toggle="tooltip"
                   wicket:message="title:new.season">
                    <i class="icon-plus-sign"></i>
                </a>
                <a wicket:id="nextRound" class="btn tooltipLink" data-toggle="tooltip"
                   wicket:message="title:next.round">
                    <i class="icon-random"></i>
                </a>
            </div>
            <div class="btn-group">
                <a wicket:id="generatePlayers" class="btn tooltipLink" data-toggle="tooltip"
                   wicket:message="title:generate.players">
                    <i class="icon-spinner"></i>
                </a>
                <a wicket:id="teamDetails" class="btn tooltipLink" data-toggle="tooltip"
                   wicket:message="title:details">
                    <i class="icon-star-empty"></i>
                </a>
            </div>
            <span class="pull-right">
                <wicket:message key="season"/>
                <select wicket:id="season" style="width: 100px"></select>
            </span>
        </div>
        <table class="table table-striped table-hover table-condensed team-record-table">
            <thead style="border: 1px solid #d3d3d3">
            <tr>
                <th style="width: 5px">
                    <wicket:message key="place.column.header"/>
                </th>
                <th style="width: 70px">
                    <wicket:message key="name.column.header"/>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:round.tooltip">
                        <wicket:message key="round.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:points.tooltip">
                        <wicket:message key="points.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:wins.tooltip">
                        <wicket:message key="wins.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:draws.tooltip">
                        <wicket:message key="draws.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:loses.tooltip">
                        <wicket:message key="loses.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:goals.scored.tooltip">
                        <wicket:message key="goals.scored.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:goals.allowed.tooltip">
                        <wicket:message key="goals.allowed.column.header"/>
                    </a>
                </th>
                <th style="width: 5px">
                    <a class=" tooltipLink" data-toggle="tooltip" wicket:message="title:goals.difference.tooltip">
                        <wicket:message key="goals.difference.column.header"/>
                    </a>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr wicket:id="teams" class="table_body_row">
                <td>
                    <span wicket:id="place">[place]</span>
                </td>
                <td>
                    <span wicket:id="name">[name]</span>
                </td>
                <td>
                    <span wicket:id="round">[round]</span>
                </td>
                <td>
                    <span wicket:id="points">[points]</span>
                </td>
                <td>
                    <span wicket:id="wins">[wins]</span>
                </td>
                <td>
                    <span wicket:id="draws">[draws]</span>
                </td>
                <td>
                    <span wicket:id="loses">[loses]</span>
                </td>
                <td>
                    <span wicket:id="goalsScored">[goals scored]</span>
                </td>
                <td>
                    <span wicket:id="goalsAllowed">[goals allowed]</span>
                </td>
                <td>
                    <span wicket:id="goalsDifference">[goals difference]</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="span5">
        <div wicket:id="empty"></div>
        <div wicket:id="chartPanel"></div>
    </div>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $("table").tablecloth({
                theme:"stats",
                striped:true,
                customClass:"table-hover",
                sortable:true,
                condensed:true
            });
        });
    </script>
</wicket:panel>